.pe-progress {
    width: 100%;
    display: inline-flex;
    vertical-align: middle;
    justify-content: center;
    align-items: center;

    .pe-progress-bar {
        position: relative;
        width: 100%;
        background-color: #ebeef5;
        overflow: hidden;

        .pe-progress-bar-inner {
            height: 100%;
            transition: all .5s;
            color: #ffffff;
            display: flex;
            justify-content: end;
            align-items: center;
            font-size: var(--pe-font-size-default);
        }

        .pe-progress-bar-striped {
            background-image: linear-gradient(45deg, rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .1) 50%, rgba(0, 0, 0, .1) 75%, transparent 75%, transparent);
            background-size: 1.25em 1.25em;
        }

        .pe-progress-bar-striped-flow {
            animation: striped-flow 3s linear infinite;
        }

        @keyframes striped-flow {
            0% {
                background-position: -100%;
            }
            100% {
                background-position: 100%;
            }
        }

        .pe-progress-bar-indeterminate {
            position: absolute;
            height: 100%;
            width: 50%;
            animation: identifier 3s infinite linear;
        }

        @keyframes identifier {
            0% {
                left: -50%;
            }

            100% {
                left: 110%;
            }
        }
    }
}

.pe-progress-circle {
    position: relative;
    display: inline-block;
    vertical-align: middle;

    .pe-progress-circle-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

.pe-progress-circle+.pe-progress-circle {
    margin-left: 10px;
}